<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>5.弹出框</title>

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>


    <script type="text/javascript">
        $(document).ready(function(e) {

            //初始化弹出框的功能
            $('button[data-toggle="popover"]').popover();

            //显示弹出框
            $('#btn1').popover('show');

            //显示事件
            $('#btn2').on('shown.bs.popover',function(e){
                alert('弹出框被显示');
            });

            //关闭事件
            $('#btn2').on('hidden.bs.popover',function(e){
                alert('弹出框被关闭');
            });
        });
    </script>

</head>

<body>

<div class="container">

    <br><br><br><br>

    <button type="button" class="btn btn-default" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="top">
        上方弹出
    </button>

    <button type="button" class="btn btn-default" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="bottom">
        下方弹出
    </button>

    <button type="button" class="btn btn-default" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="left">
        左侧弹出
    </button>

    <button type="button" class="btn btn-default" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="right">
        右侧弹出
    </button>

    <button type="button" class="btn btn-default" data-toggle="popover" title="标题文字" data-content="这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示" data-placement="right">
        带标题的弹出框
    </button>

    <button type="button" class="btn btn-danger" data-trigger="focus" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="right">
        失去焦点关闭
    </button>

    <button type="button" class="btn btn-info" data-html="true" data-toggle="popover" title="<h2>标题文字</h2>" data-content="<h3>这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示</h3>" data-placement="right">
        HTML弹出框
    </button>

    <button id="btn1" type="button" class="btn btn-success" data-toggle="popover" data-content="这是一个弹出框的提示" data-placement="right">
        程序控制
    </button>

    <button id="btn2" type="button" class="btn btn-primary" data-toggle="popover" title="标题文字" data-content="这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示这是一个弹出框的提示" data-placement="right">
        弹出框事件
    </button>

</div>

</body>
</html>